<template>
  <div class="h-full flex flex-col">
    <a-card>
      <div class="flex items-center">
        <a-button class="ml-12" type="primary" @click="toBack">返回</a-button>
        <div class="ml-12 mt-2 mb-2">
          <div class="flex">
            <LabelValue label="项目名称" :value="rowData.mc" width="200" />
            <LabelValue label="商品类别" :value="typeName" width="200" />
            <LabelValue label="商品分类" :value="rowData.categroyName" width="200" />
            <LabelValue label="规格" :value="rowData.gg" width="200" />
          </div>
          <div class="flex mt-4">
            <LabelValue label="型号" :value="rowData.modelNumber" width="200" />
            <LabelValue
              v-if="rowData.diopterMin || rowData.diopterMax"
              label="屈光度范围"
              :value="formatQu(rowData.diopterMin, rowData.diopterMax)"
              width="200"
            />
            <LabelValue
              v-if="rowData.astigmatismMin || rowData.astigmatismMax"
              label="散光度范围"
              :value="formatQu(rowData.astigmatismMin, rowData.astigmatismMax)"
              width="200"
            />
            <LabelValue label="单价" :value="formatMoney(rowData.dj, '元')" width="200" />
          </div>
        </div>
      </div>
    </a-card>
    <a-card class="mt-2 flex-1 overflow-y-auto">
      <table>
        <tr v-for="(itemX, indexX) in tableDataX" :key="indexX">
          <td v-for="(itemY, indexY) in tableDataY" :key="indexY" class="w-28">
            <span v-if="indexX == 0 && indexY == 0">{{ itemY }}</span>
            <span v-else-if="indexX == 0 && indexY != 0">{{ itemY }}</span>
            <span v-else-if="indexY == 0">{{ itemX }}</span>
            <span v-else>{{ formatMoney(rowData.dj) }}</span>
          </td>
        </tr>
      </table>
    </a-card>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { formatAmount } from '@/utils/format'
import { post } from '@/utils/request'

const emit = defineEmits(['update:open'])
const props = defineProps({
  open: {
    type: Boolean,
    default: true
  },
  rowData: {
    type: Object,
    default: () => ({})
  },
  tabActiveKey: {
    type: Number,
    default: 61
  }
})
const typeName = ref(null)
const tableData = ref([])
const tableDataX = ref([])
const tableDataY = ref([])
const getData = async () => {
  const { code, data, msg } = await post('/operation/opex/getOoProductSku', { id: props.rowData.id })
  if (code !== 0) return message.error(msg)
  if (data?.list && data?.list.length > 0) {
    tableData.value = data.list
    //屈光
    tableDataX.value = [...new Set(tableData.value.map((obj) => obj.diopter))]
    tableDataX.value.sort()
    tableDataX.value = ['屈光度/散光度', ...tableDataX.value]
    //散光
    tableDataY.value = [...new Set(tableData.value.map((obj) => obj.astigmatism))]
    tableDataY.value.sort()
    tableDataY.value = ['屈光度/散光度', ...tableDataY.value]
  } else {
    tableData.value = []
  }
}
const toBack = () => {
  emit('update:open', true)
}
const formatQu = (min, max) => {
  return min + '~' + max
}
const formatMoney = (item, unit = '') => {
  return formatAmount(item) + unit
}
// 镜片 61  隐形眼镜 62  角塑 65
watch(
  () => props.open,
  (val) => {
    if (!val) {
      if (props.tabActiveKey === 61) {
        typeName.value = '镜片'
      } else if (props.tabActiveKey === 62) {
        typeName.value = '隐形眼镜'
      } else {
        typeName.value = '角塑'
      }
      getData()
    }
  },
  { deep: true, immediate: true }
)
</script>
<style scoped>
table,
th,
td {
  border: 1px solid #d7d7d7;
  border-collapse: collapse;
}
th {
  font-weight: normal;
}
th,
td {
  height: 38px;
  padding: 4px;
  text-align: center;
}
</style>
